import React from 'react';
import ImageLazy from '../../commons/ImageLazy';
import NavLink from '../../commons/NavLink';
import NoList from '../../commons/No_List';
import { connect } from 'react-redux';
import {hashHistory } from 'react-router';
import {get_order_classify} from '../../../actions';
import {getHosImg,getDocImg,getServImg} from '../../../actions/ActionTypes';
const user_dele = require('!url?limit=8192&name=static/img/[hash:6].[ext]!../../../static/img/user_dele.png');

let filterSome = (a,b,c,d,e) => {
  d.forEach(function(item,index){
    if(item.orderState == e){
        a.push(item)
      }
  })
  a.forEach(function(item,index){
    if(b[item.unionSN]){
      b[item.unionSN].push(item)
    }else{
      b[item.unionSN] = [];
      b[item.unionSN].push(item)
    }
  })
  for(var i in b){
    c.push(i)
  }
};

let mydefault = React.createClass({

  componentDidMount:function(){
    let {dispatch} = this.props;
    dispatch(get_order_classify(this.props.userId));

    if($('.item_wrapper .item').length == 0){
      $('.prompt').fadeIn();
    }else{
      $('.prompt').hide();
    }
  },
  componentDidUpdate:function(){
    if($('.item_wrapper .item').length == 0){
      $('.prompt').fadeIn();
    }else{
      $('.prompt').hide();
    }
  },
  render:function(){
    let allorder = this.props.get_order_classify || [],
        path = this.props.path,
        _this = this,
        pending_arr = [],
        pending_arr_obj = [],
        pending_arr_obj_sn = [],
        consumed_arr = [],
        unconsumed_arr = [],
        unconsumed_arr_obj = [],
        unconsumed_arr_obj_sn = [];
    filterSome(pending_arr,pending_arr_obj,pending_arr_obj_sn,allorder,'1');
    // this.filterSome(consumed_arr,consumed_arr_obj,consumed_arr_obj_sn,allorder,'3');
    allorder.forEach(function(item,index){
      if(item.orderState == 3){
          unconsumed_arr.push(item)
      }
    })
    return(
      <div className="userOrder_classify">
        <NoList />
        <div className="item_wrapper">
        {
          pending_arr_obj_sn.map(function(itema,indexa,arr){
            let this_unionSN = '';
            return(
              <div>
                {
                  pending_arr_obj[itema].map(function(item,index){
                    let imgSrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId);
                      return(
                        <NavLink to={"/user/order/detail/" + item.orderSN} className="item border_b1">
                          <div className="wrapper clearfix">
                            <em className="checks"><var></var></em>
                            <h4>{item.itemName}·{item.itemClass}·{item.doctorName}</h4>
                            <div className="mid">
                              {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                              <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                              <div>
                                医院：{item.hospitalName}<br/>
                              </div>
                            </div>
                            <div style={{"display":"none"}}>{this_unionSN=item.unionSN}</div>
                            <h5>预约金：¥ {item.itemPrice}.00</h5>
                            <div className="num">×{item.itemNum}</div>
                          </div>
                        </NavLink>
                      )
                  })
                }
                <div className="status border_b1">
                  <div className="wrapper">
                    <div className="left">◆ 等待付款<small>(剩余23小时自动关闭)</small></div>
                    <div className="right">
                      <NavLink to={"/user/pay/"+this_unionSN} className="pays">付款</NavLink>
                    </div>
                  </div>
                </div>
              </div>
            )
          })
        }
        {
          unconsumed_arr.map(function(item,index){
            let imgSrc = getServImg(item.itemImage,'_200_200',item.hospitalId,item.itemId);
            return(
              <div>
                <NavLink to={"/user/order/detail/" + item.orderSN} className="item border_b1">
                  <div className="wrapper clearfix">
                    <em className="checks"><var></var></em>
                    <h4>{item.itemName}·{item.itemClass}</h4>
                    <div className="mid">
                      {/* <ImageLazy src="https://dummyimage.com/120x120/b293a4/fff" style={{height:"1.2rem"}}  /> */}
                      <em style={{"background-image":"url("+ imgSrc + ")"}}></em>
                      <div>
                        医院：{item.hospitalName}<br/>
                      </div>
                    </div>
                    <h5>预约金：¥ {item.itemPrice}.00</h5>
                    <div className="num">×{item.itemNum}</div>
                  </div>
                </NavLink>
                <div className="status border_b1">
                  <div className="order_number border_b1"><span>订单编号</span><em>{item.orderSN}</em></div>
                  <div className="wrapper">
                    <div className="left"></div>
                    <div className="right">
                      <NavLink to={"/user/applyRefund/" + item.orderId}  className="pays">申请退款</NavLink>
                      {/* <a href="javascript:void(0)" className="pays" onClick={_this.apply_refund}>申请退款</a> */}
                      <a href={"tel:" + item.doctorMobile} className="pays">联系医生</a>
                    </div>
                  </div>
                </div>
              </div>
            )
          })
        }


          {/* <div className="status border_b1">
            <div className="wrapper">
              <div className="left">◆ 已失效</div>
              <div className="right">
              </div>
            </div>
          </div>
          <div className="status border_b1">
            <div className="wrapper">
              <div className="left">◆ 退款成功</div>
              <div className="right">退款金额：¥ 231.00
              </div>
            </div>
          </div>
          <div className="status border_b1">
            <div className="wrapper">
              <div className="left">◆ 已消费<small>(消费时间2016.11.25)</small></div>
              <div className="right">
              </div>
            </div>
          </div> */}
        </div>
      </div>
    )
  }
})

let mapStateToProps = (state) =>{
  let userId = state.user.userId,
    get_order_classify = state.user.get_order_classify;
  return{
    userId,
    get_order_classify
  }
}

export default connect(mapStateToProps)(mydefault);
